<template>
  <div class="rightConfig">
    <a-form :model="formData" class="formData" auto-label-width>
      <a-form-item label="内容类型">
        <a-select v-model="formData.type">
          <a-option label="唐诗三百首" value="tang300"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="内容选择">
        <a-select v-model="formData.title" allow-search @change="changeTitle">
          <a-option v-for="(item, index) in tang300.titleAuthorList" :key="index" :label="item.title"
            :value="item.id"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="输入内容">
        <a-textarea v-model="formData.input" allow-clear :auto-size="{ minRows: 6 }" @input="changeInput"></a-textarea>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { useTang300Store } from "../store";
let tang300 = useTang300Store();

const formData = ref({
  type: "tang300",
  title: tang300.defaultId,
  input: ''
})
const changeTitle = () => {
  tang300.inputContent = ''
  formData.value.input = ''
  tang300.defaultId = formData.value.title
}
const changeInput = () => {
  nextTick(() => {
    console.log(formData.value.input)
    tang300.inputContent = formData.value.input
  })
}
</script>

<style lang="less" scoped>
.rightConfig {
  border-left: 1px solid #535050;
  height: 100%;
  width: 350px;
  padding: 20px;

  .formData {
    width: 100%;
  }
}
</style>